<template>
  <div class="outlierAnalysis-container">
    <!--  异常分析  -->
    <div class="analysis-dialog dialogHeaderFont">
      <el-dialog title="异常分析(销售额低于月均销售额)" width="100%" top="8vh"
           :visible.sync="visible"
           @close="$emit('update:showdialog', false)">
        <div class="analysis-dialog-content">
          <div class="analysis-content">
            <div class="dialog-content-item" v-for="(item,index) in compareUnLineMarketing" :key="index">
              <div class="dialog-content-delete" v-if="(index > 0)" @click="deleteThisCompare(index)">
                <i class="el-icon-close"></i>
              </div>
              <div class="dialog-content-body">
                <div class="flex-container">
                  <div class="leftSetPadding">
                    终端名称:
                  </div>
                  <div v-text="item.shopName">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    终端编号:
                  </div>
                  <div v-text="item.shopNumber">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    所属渠道:
                  </div>
                  <div v-text="item.channelName">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    所属城市:
                  </div>
                  <div v-text="item.city">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    所属省份:
                  </div>
                  <div v-text="item.province">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    所属地区:
                  </div>
                  <div v-text="item.region">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    销售量:
                  </div>
                  <div v-text="item.saleCount">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    销售额:
                  </div>
                  <div v-text="item.saleAmount">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    客流量:
                  </div>
                  <div v-text="item.customerNumber">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    进店客数:
                  </div>
                  <div v-text="item.customerNumber">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    品类数:
                  </div>
                  <div v-text="item.categoryNumber">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    型号数:
                  </div>
                  <div v-text="item.productNumber">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    SKU数:
                  </div>
                  <div v-text="item.skuNumber">
                  </div>
                </div>
                <div class="flex-container">
                  <div class="leftSetPadding">
                    平均价格:
                  </div>
                  <div v-text="item.averagePrice">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="analysis-set">
            <div class="flex-container" @click="analysisSetMonitor" style="cursor: pointer;">
              <div class="" style="font-size: 25px;margin: 0 8px;"><i class="el-icon-plus"></i></div>
              <div class="">添加对比终端</div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!--  analysis-dialog容器 -->
    <div class="monitor-dialog-container">
      <!--  添加对比终端  -->
      <el-dialog title="添加对比终端" :visible.sync="monitorDialogVisible" width="80%"
                 top="8vh" append-to-body class="mineSetDialog">
        <div class="outliterSet-dialog-container boederSet paddingSet whiteContainer">
          <div class="outliterSet-dialog-header" style="margin-bottom: 12px;">
            <div class="outliterSet-dialog-searchItem" style="height: 40px; padding: 5.5px 0px; " v-show="outliterSearchItemVisible == '0'">
              <el-form :inline="true" :model="unLineControlSearch" class="demo-form-inline" size="mini">
                <el-form-item label="所属地区">
                  <el-select @change="regionChange" v-model="unLineControlSearch.region" placeholder="所属地区" style="width: 135px;">
                    <el-option v-for="(item,index) in unLineControlParamSet.region" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属省份">
                  <el-select @change="provinceChange" v-model="unLineControlSearch.province" placeholder="所属省份" style="width: 135px;">
                    <el-option v-for="(item,index) in unLineControlParamSet.province" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属城市">
                  <el-select @change="cityChange" v-model="unLineControlSearch.city" placeholder="所属城市" style="width: 135px;">
                    <el-option v-for="(item,index) in unLineControlParamSet.city" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属渠道">
                  <el-select @change="channelChange" v-model="unLineControlSearch.channel" placeholder="所属渠道" style="width: 135px;">
                    <el-option v-for="(item,index) in unLineControlParamSet.channel" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitSwitch(1)">查询门店编号</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="outliterSet-dialog-searchItem flex-container space-between" v-show="outliterSearchItemVisible == '1'">
              <div class="mineSearch">
                <el-form :inline="true" :model="shopNumberSearch" class="demo-form-inline single-form-inline mineSetForm" size="mini">
                  <el-form-item label="终端编号" style="margin-bottom: 0px;">
                    <el-input v-model="shopNumberSearch.shopNumber" placeholder="输入终端编号"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 0px;">
                    <el-button type="primary" @click="onSubmitByCode(shopNumberSearch)">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="mineSearch">
                <el-button size="mini" type="primary" @click="onSubmitSwitch(0)">组合查询</el-button>
              </div>
            </div>
          </div>
          <div class="outliterSet-dialog-body">
            <el-table :data="channelMetaSet.channelUnLineSet" stripe
                      border class="setHeight boederSet" style="width: 100%">
              <el-table-column
                prop="shopNumber"
                width="120"
                label="门店编号">
              </el-table-column>
              <el-table-column
                prop="shopName"
                label="门店名称">
              </el-table-column>
              <el-table-column
                prop="channelName"
                label="所属渠道">
              </el-table-column>
              <el-table-column
                prop="city"
                label="所属城市">
              </el-table-column>
              <el-table-column
                prop="province"
                label="所属省份">
              </el-table-column>
              <el-table-column
                prop="region"
                label="所属地区">
              </el-table-column>
              <el-table-column
                label="选择">
                <template slot-scope="scope">
                  <el-radio v-model="radioUnLineSwitch" @change="radioUnLineChange" :label="scope.row.shopId">添加</el-radio>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="outliterSet-dialog-footer">
            <div class="paginationSet">
              <div class="pagination-container">
                <div class="toStart" @click="handleCurrentChange(1)">首页</div>
                <el-pagination background layout="prev, pager, next"
                               @current-change="handleCurrentChange"
                               :current-page.sync="channelMetaSet.currentPage" :total="channelMetaSet.totalRecord">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'
  import * as opreate from 'api/getData'

  export default {
      name: "outlier-analysis-un-line",
      props: {
        showdialog: {
          type: Boolean,
          default: false
        }
      },
      computed: {
        ...mapGetters(["compareUnLineMarketing"])
      },
      data() {
          return {
            radioUnLineSwitch: '',
            visible: this.showdialog,
            quickSetdialogVisible: false,
            batchSetdialogVisible: false,
            unLineControlSearch:{ region: "全部", province: "全部", city: "全部", channel: "全部" },
            unLineControlParamSet:{ region: [], province: [], city: [], channel: [] },
            shopNumberSearch: { shopNumber: "" },
            channelMetaSet:{
              channelUnLineSet: [], totalRecord: 1, currentPage: 1
            },
            outliterSearchItemVisible: 0,
            monitorDialogVisible: false
          }
      },
      mounted() {
        this.obtainParamInit()
      },
      methods: {
        ...mapMutations(["updateCompareUnLineMarketing","spliceCompareUnLineMarketing"]),
        obtainParamInit(){
          this.obtainUnlineControl()
          Promise.all([opreate.getChannelRegion(),opreate.getChannelProvince({"region": ""}),opreate.getChannelCity({"region": "","province": ""}),opreate.getShopChannelData({})]).then(res => {
            this.unLineControlParamSet = {
              region: ["全部",...res[0].data],
              province: ["全部",...res[1].data],
              city: ["全部",...res[2].data],
              channel: ["全部",...res[3].data]
            }
          }).catch(err => {
            console.error(err)
          })
        },
        handleCurrentChange(pageNumber){
          Boolean(this.outliterSearchItemVisible)
            ? this.onSubmitByCode({ pageNumber, ...this.shopNumberSearch })
            : this.obtainUnlineControl({ pageNumber, ...this.unLineControlSearch })
        },
        radioUnLineChange(shopId){
          opreate.monitorUnLineSearchParams({shopId}).then(res => {
            if(res.data){
              let data = { payload: new Array(res.data) }
              this.updateCompareUnLineMarketing(data)
              this.$message.success('成功查询一条分析数据')
            }else {
              this.$message.error('错了哦，查询信息错误')
            }
          })
        },
        analysisSetMonitor(){
          this.monitorDialogVisible = true
        },
        onSubmitSwitch(newVal) {
          Boolean(newVal)
            ? this.onSubmitByCode(this.shopNumberSearch)
            : this.obtainUnlineControl(this.unLineControlSearch)
          this.outliterSearchItemVisible = newVal
          this.radioUnLineSwitch = ''
        },
        obtainUnlineControl(param = { region: "全部", province: "全部", city: "全部", channelName: "全部"}){
          opreate.getshopMonitorData(param).then(res => {
            let { list, totalRecord, currentPage } = res.data || {}
            list.map(item=>{
              return item.shopId = item.shopIdString
            });
            this.channelMetaSet = { channelUnLineSet: list || [], totalRecord: totalRecord || 0, currentPage: currentPage || 0 }
          }).catch(err => {
            console.error(err)
          })
        },
        regionChange(region){
          Promise.all([opreate.getChannelProvince({ region }),opreate.getChannelCity({ region }),opreate.getShopChannelData({ region })]).then(res => {
            this.unLineControlParamSet = Object.assign(this.unLineControlParamSet ,{
              province: ["全部",...res[0].data],
              city: ["全部",...res[1].data],
              channel: ["全部",...res[2].data]
            })
            this.unLineControlSearch = Object.assign(this.unLineControlSearch,{ province: "全部", city: "全部", channel: "全部" })
            this.obtainUnlineControl({ region, province: "", city: "", channelName: "" })
          }).catch(err => {
            console.error(err)
          })
        },
        provinceChange(province){
          let { region } = this.unLineControlSearch
          Promise.all([opreate.getChannelCity({ province }),opreate.getShopChannelData({ province })]).then(res => {
            this.unLineControlParamSet = Object.assign(this.unLineControlParamSet ,{
              city: ["全部",...res[0].data],
              channel: ["全部",...res[1].data]
            })
            this.unLineControlSearch = Object.assign(this.unLineControlSearch,{ city: "全部", channel: "全部" })
            this.obtainUnlineControl({ region, province, city: "", channelName: ""})
          }).catch(err => {
            console.error(err)
          })
        },
        cityChange(city){
          let { region, province } = this.unLineControlSearch
          opreate.getShopChannelData({ city }).then(res => {
            this.unLineControlParamSet = Object.assign(this.unLineControlParamSet ,{ channel: ["全部",...res.data]})
            this.unLineControlSearch = Object.assign(this.unLineControlSearch,{ channel: "全部" })
            this.obtainUnlineControl({ region, province, city, channelName: ""})
          }).catch(err => {
            console.error(err)
          })
        },
        channelChange(channelName){
          let { region, province, city } = this.unLineControlSearch
          this.obtainUnlineControl({"region": region, "province": province, "city": city, "channelName": channelName})
        },
        onSubmitByCode(param = {}){
          opreate.monitorNumberChannel(param).then(res => {
            let { list, totalRecord, currentPage } = res.data || {}
            this.channelMetaSet = { channelUnLineSet: list || [], totalRecord: totalRecord || 0, currentPage: currentPage || 0 }
          }).catch(err => {
            console.error(err)
          })
        },
        deleteThisCompare(index){
          this.spliceCompareUnLineMarketing(index)
        }
      },
      watch: {
        showdialog(newVal){
          this.visible = newVal
        }
      }
  }
</script>

<style scoped>
  /**
  * @desc: This is Note
  * 异常分析Dialog
  * @author: WJ
  * @date: 2018/09/26 21:01:27
  **/
  .analysis-dialog-content{
    border: 1px solid #E0E8EF;
    border-radius: 4px;
    display: flex;
    overflow-y: scroll;
    background-color: #ffffff;
  }
  .single-form-inline{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
  }
  .plus-item span{
    padding: 0 5px;
  }
  .plus-item .el-icon-plus{
    font-weight: 800;
    font-size: 15px;
  }
  .contrastive-title .borderSet{
    border-right: none;
  }
  .contrastive-body .borderSet{
    border-right: none;
    border-left: none;
  }
  .prod-item:last-child .borderSet {
    border-right: 1px solid #E0E8EF;
  }
  .analysis-content{
    display: flex;
  }
  .dialog-content-item{
    position: relative;
    padding: 12px 30px 12px 12px;
    width: 325px;
    background: white;
    margin-right: 10px;
  }
  .dialog-content-delete{
    position: absolute;
    right: 4px;
    top: -2px;
    font-size: 20px;
    cursor: pointer;
  }
  .dialog-content-item .flex-container{
    height: 30px;
    line-height: 30px;
  }
  .dialog-content-header .flex-container{
    margin-bottom: 6px;
  }
  .dialog-content-body .flex-container{
    padding: 0 12px;
  }
  .leftSetPadding{
    margin-right: 6px;
  }
  .dialog-content-item .dialog-content-body .flex-container:nth-child(odd){
    background: #E0E8EF;
  }
  .dialog-content-item .dialog-content-body .flex-container:nth-child(even){
    background: white;
  }
  .analysis-set{
    width: 200px;
    background: #E0E8EF;
    display: flex;
    justify-content: center;
    min-width: 200px;
  }
</style>
